import { View } from "@tarojs/components"
import { addCommasToNumber, getFirstLetterUpperCase, toPage } from "../../utils"
import itemBg from '../../theme/quotes/quote-item.png'

export const BtcItem = (props: { item: any, prev: any }) => {
    const { item, prev } = props
    console.info(`${item.S}-current: ${item.u} --- ${item.S} prev:${prev.u}  === ${item.u == prev.u}`);
    console.info();
    if (!item) return <></>
    const color_dic = {
        B: ['#0180FB', '#93D1FF'],
        H: ['#543EDB', '#B0A5FF'],
        U: ['#FF8112', '#FFC567'],
        E: ['#05EAD0', '#94FFF0'],
    }
    const first = String(Array.from(item.S)[0])

    const isPriceUp = item.u > prev.u;
    let priceColor = isPriceUp ? 'red' : 'green';
    const isChangeUp = item.c > prev.c;
    let changeColor = isChangeUp ? 'red' : 'green';

    return <View className="w-full h-[116px] bg-cover my-[10px] py-[20px] px-[24px] flex items-center" style={{ background: `url(${itemBg})`, backgroundSize: '100% 100%' }} key={item.id} onClick={() => { toPage('/quotes/pages/detail/detail') }}>
        <View className="w-[76px] h-[76px] rounded-[12px] flex items-center justify-center" style={{ background: `linear-gradient( 180deg, ${color_dic[first] ? color_dic[first][0] : color_dic['B'][0]} 0%, ${color_dic[first] ? color_dic[first][1] : color_dic['B'][1]} 100%)` }}>
            <View className="w-[56px] h-[56px] rounded-full border border-solid border-[#ffffff] text-[32px] text-[#ffffff] font-medium inline-flex items-center justify-center">
                {
                    first
                }
            </View>
        </View>
        <View className="flex justify-between flex-1 h-full">
            <View className="flex flex-col justify-between pl-[20px]">
                <View className="text-[32px] text-[#ffffff]">{item.S}</View>
                <View className="text-[24px] text-[#8F8F90] transition-opacity duration-300 ease-in-out" style={{ color: changeColor }}>{`${(item.c * 100).toFixed(2)}%`}</View>
            </View>
            <View className="text-[#ffffff] text-[36px] h-full flex items-center transition-opacity duration-300 ease-in-out" style={{ color: priceColor }}>{`$${item.u}`}</View>
        </View>

    </View>
}